<template>
  <div class="test">
    <div class="top py-m mb-10">
      <a-tabs position="top" hide-content v-model:active-key="selectedKey">
        <a-tab-pane :title="item.name" v-for="(item, index) in menuList" :key="index"></a-tab-pane>
      </a-tabs>
    </div>

    <section class="content">
      <transition name="fade-slide" mode="out-in" appear>
        <component :is="menuList[selectedKey].value"></component>
      </transition>
    </section>
  </div>
</template>

<script setup>
import Dynamic from './items/dynamic/index.vue'
import Version from './items/version/index.vue'
import Search from './items/search/index.vue'
import ErrorLog from './items/errorLog/index.vue'

defineOptions({ name: 'app' })

const selectedKey = ref(0)

const menuList = [
  { name: '动态设置', value: Dynamic },
  { name: '搜索配置', value: Search },
  { name: '版本设置', value: Version },
  { name: '错误日志', value: ErrorLog }
]
</script>

<style lang="scss" scoped>
:deep(.arco-tabs-nav-vertical.arco-tabs-nav-type-line .arco-tabs-tab) {
  padding: 0;
  margin: 0;
  padding: 8px 16px;

  &:hover {
    background: var(--color-fill-1);

    .arco-tabs-tab-title {
      &::before {
        display: none !important;
      }
    }
  }

  &.arco-tabs-tab-active {
    background: rgba(var(--primary-6), 0.08);
  }
}

:deep(.arco-tabs-nav-vertical::before) {
  left: 0;
  display: none;
}

:deep(.arco-tabs-nav-vertical .arco-tabs-nav-ink) {
  left: 0;
}

:deep(.arco-tabs-nav-vertical) {
  float: none;
  flex-direction: row;
}

.test {
  flex: 1;
  padding: $margin;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .top {
    background: var(--color-bg-1);
  }

  .content {
    flex: 1;
    height: 100%;
    padding-bottom: $padding;
    background: var(--color-bg-1);
    border-radius: $radius-box;
    box-sizing: border-box;
    overflow: hidden;
  }
}
</style>
